<div class="panel-body">
  <form class="form-horizontal" novalidate #productForm="ngForm">
    <fieldset>
      <legend>Basic Product Information</legend>
      <div class="form-group" [ngClass]="{'has-error': (productNameVar.touched ||
                                          productNameVar.dirty || product.id !== 0) &&
                                          productNameVar.invalid }">
        <label class="col-md-2 control-label" for="productNameId">Product Name</label>

        <div class="col-md-8">
          <input class="form-control" id="productNameId" type="text" placeholder="Name (required)"
            required minlength="3" [(ngModel)]=product.productName name="productName"
            #productNameVar="ngModel" />
          <span class="help-block" *ngIf="(productNameVar.touched ||
                                          productNameVar.dirty || product.id !== 0) &&
                                          productNameVar.invalid">
            <span *ngIf="productNameVar.errors.required">
              Product name is required.
            </span>
            <span *ngIf="productNameVar.errors.minlength">
              Product name must be at least three characters.
            </span>
          </span>
        </div>
      </div>

      <div class="form-group" [ngClass]="{'has-error': (productCodeVar.touched ||
                                          productCodeVar.dirty || product.id !== 0) &&
                                          productCodeVar.invalid }">
        <label class="col-md-2 control-label" for="productCodeId">Product Code</label>

        <div class="col-md-8">
          <input class="form-control" id="productCodeId" type="text" placeholder="Code (required)"
            required [(ngModel)]=product.productCode name="productCode" #productCodeVar="ngModel"
          />
          <span class="help-block" *ngIf="(productCodeVar.touched ||
                                          productCodeVar.dirty || product.id !== 0) &&
                                          productCodeVar.invalid">
            <span *ngIf="productCodeVar.errors.required">
              Product code is required.
            </span>
          </span>
        </div>
      </div>

      <div class="form-group">
        <label class="col-md-2 control-label" for="descriptionId">Description</label>

        <div class="col-md-8">
          <textarea class="form-control" id="descriptionId" placeholder="Description" rows=3
            [(ngModel)]=product.description name="description"></textarea>
        </div>
      </div>

      <div class="has-error" *ngIf="errorMessage">{{errorMessage}}</div>
    </fieldset>
  </form>
</div>
